<template>
<div class="scroll-view" ref="scroll">
  <div class="scroll-wrap" :style="{width:wrapWidth}">
    <slot/>
  </div>
</div>
</template>

<script>
export default {
  props: {
    change: Function,
    scrollX:{
      type:Boolean,
      default:false
    },
    scrollY:{
      type:Boolean,
      default:true,
    },
    width:{
      type:[String, Number],
      default:"100%"
    },
  },
  computed:{
      wrapWidth(){
        if(typeof this.width==="string"){
          return this.width;
        }else{
          return this.width+"px";
        }
      }
    },
  mounted(){
    const scroll = new IScroll(this.$refs.scroll, {
      tap: true,
      click: true,
      probeType: 3,
      scrollX:this.scrollX,
      scrollY:this.scrollY
    });
    scroll.on('beforeScrollStart', ()=>{
      scroll.refresh();
    });
    // 外部需要scroll的状态就执行监听
    this.change && scroll.on('scroll', ()=>{
      if(scroll.y >= 0){
        this.change(true);
      }else{
        this.change(false);
      }
    });


    
    scroll.on("scrollEnd",()=>{
      // console.log(scroll.y,scroll.maxScrollY);
      if(scroll.y>=scroll.maxScrollY){
        this.$emit("pullUp");
      }
      if(scroll.y>0){
        this.$emit("pullDown")
      }
    })
  }
}
</script>

<style scoped lang="scss">
.scroll-view{
  overflow: hidden;
}
</style>